import React, { Component } from 'react';

import { Line as Lines } from '@ant-design/charts';

import { query } from '../../utils/utils';

import { Breadcrumb, Layout, Card } from 'antd';
const { Content } = Layout;


class Line extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        title: {
          visible: true,
          text: '月度销售业绩统计',
        },
        padding: 'auto',
        forceFit: true,
        xField: 'month',
        yField: 'amount',
        meta: {
          month: { alias: '月份' },
          amount: { alias: '销售额' },
        },
        label: {
          visible: true,
          type: 'point',
        },
        point: {
          visible: true,
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#2593fc',
            lineWidth: 2,
          },
        }
      }
    }
  }
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>管理中心</Breadcrumb.Item>
          <Breadcrumb.Item>数据统计</Breadcrumb.Item>
          <Breadcrumb.Item>折线图</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Lines {...this.state.config} />
        </Content>
      </div>
    );
  }
  componentWillMount() {
    this.getData();
  }
  getData() {
    query(`/index.php?c=charts&a=index`).then(res => {
      if (res.errcode == 0) {
        const data = [];
        res.data.forEach((item, index) => {
          data.push({
            month: ++index + '月',
            amount: parseFloat(item.total)
          });
        });
        this.setState({
          config: {
            ...this.state.config,
            data
          }
        });
      }
    });
  }
}

export default Line;
